<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{margin: 0;padding: 0}
    #wrap{
      margin: 30px;
      width: 400px;
      height: 400px;
      border: 1px solid;
    }
    #inner{
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      background: pink;
    }

  </style>
</head>
<body>
    <!--绝对定位是参照于包含块的!!!-->

    <!--
      包含块: 离绝对定位最近的开启定位的祖先就是其包含块;如果没有开启定位的祖先 那包含块就是初始包含块
      初始包含块: 是一个与视窗同等大小的矩形;但不等同于视窗;默认位置与视窗保持一致

      初始包含块 会伴随系统滚动条的滚动而滚动
    -->
  <div id="wrap">
    <div id="inner"></div>
  </div>

  <div style="height: 10000px"></div>
</body>
</html>